<template>
    <div class="order-page">
        <TopNav
            title="我的课程订单"
            :showBack="false"
            :showAdd="false"
        />

        <div class="order-list">
            <div
                    class="order-item"
                    v-for="order in orders"
                    :key="order.id"
            >
                <img class="course-img" :src="order.imageHead" alt="" />
                <div class="order-info">
                    <div class="title-section">
                        <h3>{{ order.title }}</h3>
                     <!--   <span class="payment-type" :class="order.paymentType">
              {{ order.paymentType === 'installment' ? '分期' : '一次性' }}
            </span>-->
                    </div>
                    <p class="info-text">
                        培训周期：{{ order.trainingPeriod }} |
                        授课方式：{{ order.teachingMethod === '10' ? '线上' : '线下' }}
                    </p>
                    <p class="info-text">报名人数：{{ order.signUp }}人</p>

                    <div class="bottom-row">
                        <span class="current">￥{{ order.price }}</span>
                        <span class="origin">￥{{ order.originalPrice }}</span>
                        <span class="installment_text">{{ order.paymentType === 'installment' ? '分期' : '一次性' }}</span>
                        <button class="btn" @click="payOrder(order)">去付款</button>
                    </div>

                    <div v-if="order.paymentType==='installment'" class="installment-bar">
                        <div class="installment-progress" :style="{ width: order.progress + '%' }"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    export default {
        name: "OrderPage",
        components: {
            TopNav // 注册
        },
        data() {
            return {
                orders: [
                    {
                        id: 1,
                        title: "插画高级班培训",
                        imageHead: "https://img1.baidu.com/it/u=2174448108,1312423631&fm=253&fmt=auto&app=138&f=JPEG?w=494&h=494",
                        trainingPeriod: "5个月",
                        teachingMethod: "10",
                        signUp: 648,
                        price: 6856,
                        originalPrice:9999,
                        paymentType: "installment",
                        progress: 40
                    },
                    {
                        id: 2,
                        title: "Python全栈开发",
                        imageHead: "https://img1.baidu.com/it/u=2174448108,1312423631&fm=253&fmt=auto&app=138&f=JPEG?w=494&h=494",
                        trainingPeriod: "1年",
                        teachingMethod: "10",
                        signUp: 785,
                        price: 8880,
                        originalPrice:9999,
                        paymentType: "oneTime"
                    },
                    {
                        id: 3,
                        title: "日语零基础",
                        imageHead: "https://img1.baidu.com/it/u=2174448108,1312423631&fm=253&fmt=auto&app=138&f=JPEG?w=494&h=494",
                        trainingPeriod: "1年",
                        teachingMethod: "20",
                        signUp: 611,
                        price: 8380,
                        originalPrice:9999,
                        paymentType: "installment",
                        progress: 70
                    },
                    {
                        id: 4,
                        title: "影视后期制作",
                        imageHead: "https://img1.baidu.com/it/u=2174448108,1312423631&fm=253&fmt=auto&app=138&f=JPEG?w=494&h=494",
                        trainingPeriod: "6个月",
                        teachingMethod: "10",
                        signUp: 1022,
                        price: 7980,
                        originalPrice:9999,
                        paymentType: "oneTime"
                    }
                ]
            };
        },
        methods: {
            payOrder(order) {
                alert(`去付款课程：${order.title}`);
            }
        }
    };
</script>

<style scoped>
    .order-page {
        min-height: 100vh;
        padding-bottom: 60px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    .order-list {
        padding: 12px;
    }
    .order-item {
        display: flex;
        align-items: center; /* 垂直居中 */
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-bottom: 1px solid #f5f5f5;
        transition: transform 0.2s;
        padding: 0px 5px;
    }
    .order-item:hover {
        transform: translateY(-2px);
    }
    .course-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 12px;
        margin-right: 12px;
    }
    .order-info {
        flex: 1;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .title-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .title-section h3 {
        font-size: 15px;
        color: #333;
        margin: 0;
        font-weight: bold;
    }
    .payment-type {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 12px;
        color: #fff;
        margin-right: 10px;
    }
    .payment-type.installment {
        /*background-color: #ff9b00;*/
        background: linear-gradient(135deg, #4a90e2, #50aee5);
    }
    .payment-type.oneTime {
        background-color: #6cc1ff;
    }
    .info-text {
        margin: 4px 0;
        font-size: 13px;
        color: #666;
    }
    .bottom-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 6px;
    }
    .current {
        color: red;
        font-size: 15px;
        font-weight: bold;
        margin-right: 6px;
    }
    .origin {
        text-decoration: line-through;
        color: #aaa;
        font-size: 12px;
        margin-right: auto;
    }
    .installment_text{
        color: #aaa;
        font-size: 12px;
        margin-right: auto;
    }
    .btn {
        background: linear-gradient(135deg, #4a90e2, #50aee5);
        color: #fff;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        margin-right: 10px;
    }
    .btn:active {
        background-color: #3055c0;
    }

    /* 分期进度条 */
    .installment-bar {
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
        margin-top: 6px;
        overflow: hidden;
    }
    .installment-progress {
        height: 6px;
        background: linear-gradient(135deg,#ffd966 0%, #ffbb33 50%, #ff9b00 100% );
        border-radius: 3px 0 0 3px;
    }

    /* 响应式 */
    @media (max-width: 375px) {
        .course-img { width: 80px; height: 80px; }
        .header { font-size: 16px; }
    }
</style>
